<script setup>
import { Plus } from "@element-plus/icons-vue";
import useTable from "@/utils/useTable";
import {http} from "@/api";
import { ref } from "vue";

/**
 * 表格
 * @type {Ref<UnwrapRef<*[]>>}
 */
const {
  searchParams,
  pageNo,
  pageSize,
  total,
  changePage,
  changeSize,
  dataSource,
  search,
  reset,
  openAdd,
  openEdit,
  updateStatus
} = useTable({
  requestFn: http.Coupon,
  routerPre: 'Coupon',
  params: {
    name: '',
  }
})

const show1 = ref(false)
const sendForm = ref({
  coupon_id: '',
  type: 0,
  start_time: '',
  end_time: '',
})
const userList = ref([])
const userListChecked = ref([])
const openSend = (row) => {
  show1.value = true
  sendForm.value = {
    coupon_id: row.id,
    type: 0,
    start_time: '',
    end_time: '',
  }
  http.Member.list({}).then(res => {
    userList.value = res.data
  })
}

const selectChange = (val) => {
  userListChecked.value = val
}
const saveSend = () => {
  http.CouponMember.create({
    ...sendForm.value,
    memberIdList: sendForm.value.type === 1 ? userList.value.map(item => item.id) : userListChecked.value.map(item => item.id)
  }).then(res => {
    show1.value = false
    search()
  })
}
const show2 = ref(false)
const openSendRecord = (row) => {
  show2.value = true
  http.CouponMember.list({
    coupon_id: row.id
  }).then(res => {
    recordList.value = res.data
  })
}
const recordList = ref([])
</script>


<template>
  <el-drawer v-model="show1" title="发放优惠券" size="800px">
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="show1 = false">取消</el-button>
        <el-button type="primary" @click="saveSend">
          确认
        </el-button>
      </span>
    </template>
    <el-form>
      <el-form-item label="发放方式">
        <el-radio-group v-model="sendForm.type" class="ml-4">
          <el-radio :label="1" size="large">全部</el-radio>
          <el-radio :label="0" size="large">部分</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="使用时间">
        <el-date-picker
            v-model="sendForm.start_time"
            type="datetime"
            placeholder="选择日期时间">
        </el-date-picker>
        <span>至</span>
        <el-date-picker
            v-model="sendForm.end_time"
            type="datetime"
            placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-table :data="userList" v-if="sendForm.type === 0" @selection-change="selectChange">
          <el-table-column type="selection">
          </el-table-column>
          <el-table-column label="姓名" prop="nickname">
          </el-table-column>
          <el-table-column label="手机" prop="phone">
          </el-table-column>
          <el-table-column label="头像">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <ViewImage type="image" :image-url="scope.row.avatar_url"/>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
  </el-drawer>
  <el-drawer v-model="show2" title="优惠券记录" size="800px">
    <el-table :data="recordList">
      <el-table-column label="姓名" prop="member.nickname">
      </el-table-column>
      <el-table-column label="手机" prop="member.phone">
      </el-table-column>
      <el-table-column label="是否使用">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-tag :type="scope.row.is_use === 1 ? 'success' : 'error'">{{ scope.row.status === 1 ? '是' : '否' }}</el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </el-drawer>
  <PageMain title="优惠券管理">
    <el-form label-suffix="：" inline>
      <el-form-item label="名称">
        <el-input v-model="searchParams.name" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="add-box">
      <el-button type="primary" :icon="Plus" @click="openAdd">添加</el-button>
    </div>
    <div class="table-box">
      <el-table :data="dataSource">
        <el-table-column label="名称" prop="name">
        </el-table-column>
        <el-table-column label="金额" prop="value" />
        <el-table-column label="最小使用金额" prop="mini_value" />
        <el-table-column label="开始时间" prop="start_time" />
        <el-table-column label="结束时间" prop="end_time" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button v-if="scope.row.status === 0" type="text" @click="openEdit(scope.row)">编辑</el-button>
            <el-button v-if="scope.row.status === 0" type="text" @click="openSend(scope.row)">发放</el-button>
            <el-button v-if="scope.row.status === 1" type="text" @click="openSendRecord(scope.row)">发放记录</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          :page-sizes="[10, 50, 100, 200]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="changeSize"
          @current-change="changePage"
      />
    </div>
  </PageMain>
</template>

<style scoped lang="scss">

</style>
